<script setup lang="ts">
import { ref } from 'vue'
// import { addAddressAPI } from '@/services/address'
import type { Address } from '@/types/address'
import { useAddressStore } from '@/stores'
const address = ref({
  receiver: '',
  contact: '',
  address: '',
  isDefault: 1,
  provinceCode: '',
  cityCode: '',
  countyCode: '',
  region: '',
} as Address)
// const query = defineProps<{
//   id: number
// }>()
const { setAddress, setIsDefaule } = useAddressStore()
// 省市区选择器回调
const onRegionChange: UniHelper.RegionPickerOnChange = (e) => {
  address.value.region = e.detail.value.join(' ')
  address.value.provinceCode = e.detail.code![0]
  address.value.cityCode = e.detail.code![1]
  address.value.countyCode = e.detail.code![2]
}
// 切换默认地址
const switchChange: UniHelper.SwitchOnChange = (e) => {
  address.value.isDefault = e.detail.value ? 1 : 0
}
// 新增地址调用接口
// const addAddress = async () => {
//   await addAddressAPI(address.value)
// }
const form = ref<UniHelper.UniFormsInstance>()
const rules: UniHelper.UniFormsRules = {
  receiver: {
    rules: [{ required: true, errorMessage: '请填写收货人姓名' }],
  },
  contact: {
    rules: [
      { required: true, errorMessage: '请填写收货人手机号码' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '请输入正确的手机号码' },
    ],
  },
  region: {
    rules: [{ required: true, errorMessage: '请选择市区县' }],
  },
  address: {
    rules: [{ required: true, errorMessage: '请填写详细地址' }],
  },
}
// 本地store存储地址
const addAddress = async () => {
  await form.value?.validate?.()
  if (address.value.isDefault === 1) {
    setIsDefaule()
  }
  setAddress(address.value)
  toast()
}
const toast = () => {
  uni.showToast({ title: '地址保存成功', icon: 'none' })
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<template>
  <view class="content">
    <uni-forms ref="form" :model="address" :rules="rules">
      <!-- 表单内容 -->
      <uni-forms-item class="form-item" name="receiver">
        <text class="label">收货人</text>
        <input
          :auto-focus="true"
          class="input"
          placeholder="请填写收货人姓名"
          v-model="address!.receiver"
        />
      </uni-forms-item>
      <uni-forms-item class="form-item" name="contact">
        <text class="label">手机号码</text>
        <input
          :maxlength="11"
          class="input"
          placeholder="请填写收货人手机号码"
          v-model="address!.contact"
        />
      </uni-forms-item>
      <uni-forms-item class="form-item" name="region">
        <text class="label">所在地区</text>
        <picker
          class="picker"
          mode="region"
          :value="address.region?.split(' ')"
          @change="onRegionChange"
        >
          <view v-if="address.region">{{ address.region }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item class="form-item" name="address">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="address!.address" />
      </uni-forms-item>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch
          @change="switchChange"
          class="switch"
          color="#27ba9b"
          :checked="address.isDefault === 1"
        />
      </view>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @tap="addAddress">保存</button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
